<template>
    <view class="page">
        <!-- 导航栏 -->
        <u-navbar :is-back="false" :background="{ background: '#CA0019' }">
            <view class="header">
                <view class="search-box" @click="$u.route('pages/search/search?type=goods')">
                    <!-- <div class="search">
                        <u-icon class="u-m-r-20" name="search" color="#C1C1C1" size="35"></u-icon>
                        搜索您想要的产品
                    </div> -->
                    <u-search placeholder="搜索商品" :show-action="false" :disabled="true" />
                </view>
            </view>
        </u-navbar>
        <view class="slides-box">
            <u-swiper interval="5000" height="250" :list="slideList" title @click="clickBanner" mode="dot" indicator-pos="bottomRight" />
        </view>
        <view class="u-menu-wrap">
            <!-- 分类 -->
            <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
                <view
                    v-for="(item, index) in tabbar"
                    :key="index"
                    class="u-tab-item"
                    :class="[current == index ? 'u-tab-item-active' : '']"
                    :data-current="index"
                    @tap.stop="swichMenu(index)"
                >
                    <text class="u-line-1">{{ item.name }}</text>
                </view>
            </scroll-view>
            <view class="class-item">
                <scroll-view scroll-y style="width: 100%; height: 70vh;" @scrolltolower="loadMore">
                    <goodsItems :list="goods" />
                    <u-loadmore :status="status" bg-color="#f8f8f8" margin-top="50" margin-bottom="50" @loadmore="loadMore" />
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script>
import pulldownRefresh from "@/components/pulldownRefresh.vue";
import goodsItems from "@/components/goods-items/index";

export default {
    components: {
        pulldownRefresh,
        goodsItems,
    },
    data() {
        return {
            page: 1,
            status: "loading",
            goods: [],
            tabbar: [{ id: null, name: "" }],
            scrollTop: 0, //tab标题的滚动条位置
            current: 0, // 预设当前项的值
            menuHeight: 0, // 左边菜单的高度
            menuItemHeight: 0, // 左边菜单item的高度
            slideList: [],
        };
    },
    onLoad() {
        this.getCategory();
        this.getSlides();
    },
    // onReachBottom() {
    //     this.loadMore();
    // },
    methods: {
        refresh() {
            this.page = 1;
            this.goods = [];
            this.getCategoryGoods();
        },
        loadMore() {
            if (this.status === "loadmore") {
                this.getCategoryGoods();
            }
        },
        getSlides() {
            this.$api.get({
                url: "webapp/index/appIndex",
                success: (res) => {
                    if (res.code == "10001") {
                        this.slideList = res.data.ads;
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 获取分类下商品
        getCategory() {
            this.$api.get({
                url: "portal/shop/get_shop_category",
                data: {
                    order: "+id",
                    field: "id,name",
                },
                success: (res) => {
                    if (res.code === 1) {
                        this.tabbar = res.data;
                        this.getCategoryGoods();
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
            });
        },
        // 获取分类下商品
        getCategoryGoods() {
            this.status = "loading";
            this.$api.get({
                url: "portal/shop/get_commodity_list",
                data: {
                    id: this.tabbar[this.current].id,
                    page: `${this.page},10`, // 一页显示10条
                    order: "-id",
                    field: "id,title,thumbnail,price",
                },
                success: (res) => {
                    if (res.code === 1) {
                        let goods = res.data;
                        this.goods = this.goods.concat(goods);
                        // 分页判断
                        if (goods.length < 10) {
                            this.status = "nomore";
                        } else {
                            this.status = "loadmore";
                            this.page++;
                        }
                    } else {
                        this.$toast("数据获取失败");
                    }
                },
                complete: () => {
                    this.$refs.pulldownRefresh && this.$refs.pulldownRefresh.endPulldownRefresh(); // 停止刷新动画
                },
            });
        },
        // 点击左边的栏目切换
        async swichMenu(index) {
            if (index == this.current) return;
            this.current = index;
            // 如果为0，意味着尚未初始化
            if (this.menuHeight == 0 || this.menuItemHeight == 0) {
                await this.getElRect("menu-scroll-view", "menuHeight");
                await this.getElRect("u-tab-item", "menuItemHeight");
            }
            // 将菜单菜单活动item垂直居中
            this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
            this.page = 1;
            this.goods = [];
            this.getCategoryGoods();
        },
        // 获取一个目标元素的高度
        getElRect(elClass, dataVal) {
            new Promise((resolve, reject) => {
                const query = uni.createSelectorQuery().in(this);
                query
                    .select("." + elClass)
                    .fields({ size: true }, (res) => {
                        // 如果节点尚未生成，res值为null，循环调用执行
                        if (!res) {
                            setTimeout(() => {
                                this.getElRect(elClass);
                            }, 10);
                            return;
                        }
                        this[dataVal] = res.height;
                    })
                    .exec();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.page {
    width: 100%;
    height: 100vh;
}
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*  #ifndef MP  */
    flex: 1; // 小程序不设置flex:1，避免被右上角的胶囊遮挡
    /*  #endif  */
    .search-box {
        flex-grow: 1;
        margin: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.search {
    width: 90%;
    height: 60rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    color: #c1c1c1;
    font-size: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.u-menu-wrap {
    display: flex;
    // position: fixed;
    // height: 100vh;
    // left: 0;
    // z-index: 100;
    background: #f8f8f8;
    .menu-scroll-view {
        height: 70vh;
    }
}
.u-tab-view {
    flex: 0 1 180rpx;
    // width: 200rpx;
    .u-tab-item {
        width: 180rpx;
        height: 110rpx;
        background: #f6f6f6;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #999;
        font-weight: 400;
        line-height: 1;
    }
    .u-tab-item-active {
        position: relative;
        color: #ca0019;
        font-size: 24rpx;
        font-weight: 600;
        background: #fff;
        &::before {
            content: "";
            position: absolute;
            border-left: 4px solid #ca0019;
            height: 100%;
            left: 0;
        }
    }
}
.class-item {
    padding: 10rpx;
    border-radius: 8rpx;
}
.item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
        width: 250rpx;
        height: 250rpx;
        background-color: #ffffff;
        position: relative;
        margin-bottom: 20rpx;
        border-radius: 4px;
        .image {
            width: 250rpx;
            height: 250rpx;
            border-radius: 4px;
        }
        .desc {
            position: absolute;
            bottom: 0;
            left: 0;
            background: rgba(1, 1, 1, 0.3);
            padding: 10rpx;
            border-radius: 4px;
        }
        .title {
            font-size: 30rpx;
            margin-top: 5px;
            color: #fff;
        }
        .price {
            font-size: 32rpx;
            font-weight: bold;
            color: #fff;
            margin-top: 2px;
        }
    }
}
.slides-box {
    padding: 30rpx;
    background: #fff;
}
</style>
